<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .app , #wrap{
            width: 200px;
            height: 200px;
            margin: 50px auto;
            background-color: rgb(240, 149, 13);
        }

    </style>
</head>
<body>
    <div class="app">
        <div class="son">
           
        </div>
    </div>
    <!-- 移动端事件 -->
    <script>
        //所谓的  touch事件-----手机端
        //touchstart move end 
        var app=document.querySelector(".app");
        var son=document.querySelector(".son");
        var body=document.querySelector("body");
        app.addEventListener("DOMNodeRemoved",function(){
            console.log("我是被删除的儿子");
        })
        son.addEventListener("DOMNodeRemovedFromDocument",function(){
            console.log("我要被删除的了从网上");
        })
        app.addEventListener("DOMNodeRemovedFromDocument",function(){
            console.log("我儿子要被删除的了从网上");
        })
        body.addEventListener("DOMSubtreeModified",function(){
            console.log("文本书更新");
        })
        var a=app.remove();
        // console.log(a);
        //被删除的节点[DOMNodeRemoved]  ----被删除和被删除的包含子节点[DOMNodeRemovedFromDocument]----父节点[DOMSubtreeMpdified]
        //呗天机节点[DOMNodeInserted]---被添加节点[DOMNodeInsertedIntoDocument]---父节点[DOMSubtreeModified]
        var div=document.createElement("div");
        div.addEventListener("DOMNodeInserted",function(){
            console.log("我是被添加的儿子");
        })
        div.addEventListener("DOMNodeInsertedIntoDocument",function(){
            console.log("我是被添加的儿子上网页");
        })
        body.addEventListener("DOMSubtreeModified",function(){
            console.log("我是被添加的儿子的爸爸");
        })

        body.appendChild(div);


    </script>


</body>
</html>